<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息搜索</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            text-align: center;
        }
        table{
            border: 1px solid grey;
            width: 1200px;
            margin: auto;
            border-collapse: collapse;
        }
        tr:first-child{
            border-bottom: 1px solid grey;
        }
        th{
            height: 40px;
            line-height: 40px;
        }
        td{
            height: 32px;
            line-height: 32px;
            text-align: center;
        }
        input,button{
            outline: none;
        }
        input{
            width: 200px;
            height: 32px;
            line-height: 32px;
        }

        button{
            width: 50px;
            height: 32px;
        }


    </style>
</head>
<body>
    <div id="main">
        <input type="text" placeholder="输入姓名" v-model="search_name"  @keyup.enter="search_name">
        <button >搜索</button>
        <table>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>手机号码</th>
                <th>邮箱</th>
                <th>地址</th>
            </tr>
            <tr v-for="item in get_result" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.sex == 1 ? "男" : "女"}}</td>
                <td>{{item.age}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.email}}</td>
                <td>{{item.address}}</td>
            </tr>

        </table>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        let main = new Vue({
            el:"#main",
            data:{
                users:[
                    {
                        "id" : 0,
                        "name":"张三",
                        "sex":1,
                        "age":20,
                        "phone":13006602938,
                        "email": "1552636788@qq.com",
                        "address" : "广东省深圳市XX区牛逼花园"
                    },
                    {
                        "id" : 1,
                        "name":"李四",
                        "sex":0,
                        "age":22,
                        "phone":18826602938,
                        "email": "18826602938@qq.com",
                        "address" : "广东省深圳市大佬区大佬别墅"
                    },
                    {
                        "id" : 2,
                        "name":"王五",
                        "sex":1,
                        "age":23,
                        "phone":13011222938,
                        "email": "13011222938@163.com",
                        "address" : "广东省深圳市高档区海景房"
                    },
                    {
                        "id" : 3,
                        "name":"张三",
                        "sex":0,
                        "age":22,
                        "phone":13006602111,
                        "email": "13006602111@qq.com",
                        "address" : "广东省深圳市高档花园"
                    },
                ],
                search_name : ""
            },

           
            computed:{
                get_result: function(){
                    return this.users.filter((item)=>{
                        return item.name.match(this.search_name)
                    })
                }
            }   
        })

    </script>
</body>
</html>